// 在 IIFE 中为不同按钮绑定点击事件监听器
// 通过点击按钮来发送异步请求
(function(){

    const getBtn = document.querySelector('.first>.get');

    getBtn.addEventListener( 'click' , () => {

        // 创建 XMLHttpRequest实例
        const $http = new XMLHttpRequest();

        // 绑定 readystatechange 事件监听器
        $http.addEventListener('readystatechange', evt => {
            // 当 readyState 与常量 DONE 相等时
            if( $http.readyState === $http.DONE ) {
                let resp = $http.response ;
                console.log( '响应数据: ' , resp );
            }
        },false);

        // 打开连接
        $http.open( 'get' , '/panda');

        $http.setRequestHeader('content-type','application/json');

        // 发送请求
        $http.send( JSON.stringify( { id: 4321 , name: '小和' } ));

    } , false );

    const postBtn = document.querySelector('.first>.post');

    postBtn.addEventListener('click',()=>{
        // 创建 XMLHttpRequest实例
        const $http = new XMLHttpRequest();

        // 监听 load 事件
        $http.addEventListener('load',evt=>{
            // console.log( $http.readyState , evt );
            console.log( $http.response , typeof $http.response );
        },false);
        
        // 监听 error 事件
        $http.addEventListener('error',evt=>{
            // console.log( $http.readyState , evt );
            console.log( $http.response , typeof $http.response );
        });

        // 打开连接
        $http.open('post','/panda');

        // 设置请求头
        $http.setRequestHeader( 'content-type' , "application/json" );

        let entity = JSON.stringify( { id: 2345 , name: '和和' } );
        // 发送请求
        $http.send( entity );
    },false);

    const putBtn = document.querySelector('.first>.put');

    putBtn.addEventListener('click', ()=>{
        // 创建 XMLHttpRequest 实例
        const $http = new XMLHttpRequest();
        // 监听 readystatechange 事件
        $http.addEventListener('readystatechange',evt=>{
            console.log( $http === evt.target );
            switch( $http.readyState ) {
                case $http.HEADERS_RECEIVED :
                    console.log( 'overrideMimeType' );
                    // 覆盖服务端所返回 响应 的 MIME类型
                    $http.overrideMimeType('text/json');
                    break;
                case $http.DONE :
                    console.log( $http );
                    let x = JSON.parse( $http.responseText );
                    console.log( x );
                    break;
            }
        }, false);
        
        // 建立链接
        $http.open( 'put' , '/panda' );

        // 期望服务端返回的类型 (目前测试无果)
        // $http.responseType = "text/json";

        // 设置请求头
        $http.setRequestHeader( 'content-type' , "application/json" );

        let body = JSON.stringify( { id: 3456 , name: '大美' } );
        // 发送请求
        $http.send( body );

    },false);

    const deleteBtn = document.querySelector('.first>.delete');

    deleteBtn.addEventListener('click',()=>{
        const $http = new XMLHttpRequest();
        $http.addEventListener('load',evt=>{
            console.log( $http.response );
            let headers = $http.getAllResponseHeaders();
            console.log( headers );
            console.log( typeof headers );
            console.log( $http.getResponseHeader( 'content-type' ) );
        },false);
        $http.open( 'delete' , '/panda');
        $http.setRequestHeader('content-type','application/json');
        $http.send( JSON.stringify( { id: 5678 , name: '大美' }) );
    },false);

    const headBtn = document.querySelector('.first>.head');

    headBtn.addEventListener('click',()=>{
        const $http = new XMLHttpRequest();
        console.log( 'readyState: ' , $http.readyState );
        $http.addEventListener('readystatechange',evt=>{
           console.log( 'readyState: ' , $http.readyState );
           if( $http.readyState === $http.DONE ){
               console.log( 'response headers: ' , $http.getAllResponseHeaders() );
               console.log( 'response body: ' , $http.response );
           }
        },false);
        $http.open( 'head' , '/panda');
        $http.setRequestHeader('content-type','application/json');
        $http.send( JSON.stringify( { id: 7890 , name: '小小美' }) );
    },false);

})();